<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue动画</title>
		<script src="../vue@3.2.23.js"></script>
		<link
		    rel="stylesheet"
		    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
		  />
		<style>
			.content{
				width: 200px;
				height: 50px;
				background-color: bisque;
				line-height: 50px;
				text-align: center;
				transition: all 0.2s;
			}
			/* 动画 */
			@keyframes move {
				20%{
					transform: translateX(-20px)
				}
				40%{
					transform: translateX(20px)
				}
				60%{
					transform: translateX(-20px)
				}
				80%{
					transform: translateX(20px)
				}
				100%{
					transform: translateX(0px)
				}
			}
			.animate{
				animation: move 0.8s linear;
			}
			.transition{
				transition: all 0.8s;
			}
			/* 过度 */
			
			/* 进入动画 */
			.v-enter-from{
				opacity: 0;
			}
			.v-enter-active{
				transition: all 3s;
			}
			.v-enter-to{
				opacity: 1;
			}
			/* 离开动画 */
			.v-leave-from{
				opacity: 1;
			}
			.v-leave-active{
				transition: all 3s;
			}
			.v-leave-to{
				opacity: 0;
			}
			
			/* 进入动画 */
			.four-enter-from{
				opacity: 0;
				background-color: aliceblue;
			}
			.four-enter-active{
				transition: all 1s;
			}
			.four-enter-to{
				opacity: 1;
				background-color: bisque;
			}
			/* 离开动画 */
			.four-leave-from{
				opacity: 1;
				background-color: bisque;
			}
			.four-leave-active{
				transition: all 1s;
			}
			.four-leave-to{
				opacity: 0;
				background-color: aliceblue;
			}
			.v-move{
				transition: all 1s; 
			}
			.num{
				display: inline-block;
				width: 20px;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<!-- <div ref="firstDiv" class="content" :class="className" @animationend="className.animate=false" :style="style">我是第一个动画</div>
			<div ref="secondDiv" class="content" :class="className" @animationend="className.animate=false" :style="style">我是第二个动画</div>
			 -->
			
			<!-- <transition>
				<div v-if="isShow" class="content" >我是第三个动画</div>
			</transition> -->
			<!-- 进入退出的生命周期函数 -->
			<!-- <transition name="four" @before-enter="life('before-enter')" @enter="life('enter')" @after-enter="life('after-enter')"
			@before-leave="life('before-leave')" @leave="life('leave')" @after-leave="life('after-leave')">
				<div v-if="isShow" class="content" >我是第四个动画</div>
			</transition> -->
			<!-- 禁用css动画：:css="false" -->
			<!-- <transition :css="false" @enter="life" @after-enter="endLife">
				<div v-if="isShow" class="content" >我是第五个动画</div>
			</transition> -->
			
			<!-- 结合三方css库使用，，网站：animate.style -->
			<!-- <transition enter-active-class="animate__animated animate__zoomIn" leave-active-class="animate__animated animate__slideOutDown">
				<div v-if="isShow" class="content" >我是第六个动画</div>
			</transition> -->
			
			<!-- 组件动画切换 -->
			<!--  appear="true"  设置开始动画 -->
			<transition mode="out-in" appear="true" enter-active-class="animate__animated animate__zoomIn" leave-active-class="animate__animated animate__zoomOut">
				<!-- 组件渲染标签 -->
				<component :is="componentName"></component>
			</transition>
			
			<!-- 列表动画 -->
			<transition-group enter-active-class="animate__animated animate__rotateIn" leave-active-class="animate__animated animate__zoomOut">
				<div class="num" v-for="val in numList" :key="val">{{val}}</div>
			</transition-group>
			
			<div class="but_box">
				<!-- 传递事件对象 -->
				<button @click="addNum">添加元素</button>
			</div>
			
			<div class="but_box">
				<!-- 传递事件对象 -->
				<button @click="startMove($event)">切换动画1</button>
			</div>
		</div>
	</body>
</html>
<script>
	const componentA = {
		template:`<div class="content" >我是第七个动画A</div>`
	}
	const componentB = {
		template:`<div class="content" >我是第七个动画B</div>`
	}
	const app = Vue.createApp({
		components:{
			componentA,componentB
		},
		data(){
			return{
				isShow:false,
				className:{'animate':false,transition:true},
				style:{
					'backgroundColor':'bisque'
				},
				componentName:'component-a',
				numList:[1,2,3].reverse()
			}
		},
		methods:{
			startMove(e){
				// const rect = e.target.getBoundingClientRect()
				// console.log(rect);
				// // 获取所有的dom指向
				// console.log(this.$refs);
				// console.log(this.$refs.abc.count);
				// this.$refs.abc.fun()
				
				this.className.animate = true;
				if(this.style.backgroundColor == 'bisque'){
					this.style.backgroundColor = 'red'
				}else{
					this.style.backgroundColor = 'bisque'
				}
				
				this.isShow = !this.isShow;
				if(this.componentName == 'component-a'){
					this.componentName = 'component-b'
				}else{
					this.componentName = 'component-a'
				}
			},
			life(el,done){
				const ani = setInterval(()=>{
					if(el.style.backgroundColor == 'bisque'){
						el.style.backgroundColor = 'white'
					}else{
						el.style.backgroundColor = 'bisque'
					}
				},200)
				setTimeout(()=>{
					clearInterval(ani)
					// 触发动画结束
					done()
				},5000)
			},
			endLife(el){
				console.log('进入动画结束了');
			},
			addNum(){
				this.numList.unshift(this.numList[0]+1)
			}
		}
	})
	app.component('abc',{
		data(){
			return{
				count:22
			}
		},
		methods:{
			fun(){
				alert(123)
			}
		},
		
	})
	const vm = app.mount("#app")
</script>